<template>
  <div>
    <el-row
      type="flex"
      :gutter="20"
      style="padding-left: 1vw"
    >
      <el-col :span="23">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 2vh 0 0 2vw;"
        >
          <el-form-item>
            <div
              slot="label"
              style="color:white; font-size: 20px;"
            >
              包含字段：
            </div>
            <el-input v-model="searchContains" />
          </el-form-item>
          <el-button
            class="el-blue-button"
            @click="search()"
          >
            <i class="el-icon-search" /> &nbsp;查询
          </el-button>
          <el-button
            class="el-blue-button"
            @click="reset()"
          >
            <i class="el-icon-refresh-right" />&nbsp;重置
          </el-button>
          <el-button
            class="el-blue-button"
            style="float: right;margin-right:10px"
            @click="addHandler()"
          >
            <i class="el-icon-plus" />&nbsp;新增
          </el-button>
        </el-form>
      </el-col>
    </el-row>

    <hr style="border-bottom: none;border-color: #8c939d">
    <br/>
<el-row style="margin: 0 3vw">

    <el-table
      :data="ruleList"
      border
      style="width: 100%;padding:2vh "
    >
      <el-table-column
        prop="id"
        label="规则id"
        align="center"
      />
      <el-table-column
        prop="contains"
        label="包含字段"
        align="center"
      />
      <el-table-column

        label="报警等级"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ getAlarmClass(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            class="el-blue-button"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="editHandler(scope.row)"
          >
            修改
          </el-button>
          <el-button
            class="el-blue-button"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="deleteHandler(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
        style="margin-top: 10px;float: right"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :current-page.sync="currentPage"
        :total="total"
        @current-change="handleCurrentChange"
      />
</el-row>

    <el-dialog
      title="新增规则"
      :visible.sync="dialogVisibleAdd"
      width="50%"
    >
        <div class="ruleform-content">
          <el-form
            ref="addForm"
            :model="addForm"
            :rules="rules"
          >
            <el-form-item :label-width="formLabelWidth"
              prop="contains"
            >
            <span slot="label" class="form-title">
                包含字段
            </span>
              <el-input
                v-model="addForm.contains"
                placeholder="请输入包含字段"
              />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth"
              prop="alarmClass"
            >
                <span slot="label" class="form-title">
                  报警等级
                </span>
              <el-select
                v-model="addForm.alarmClass"
                style="width: 100%;"
                placeholder="请选择报警等级"
              >
                <el-option
                  v-for="item in alarmClasses"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          class="el-green-button"
          @click="submitAdd"
        >添加</el-button>
        <el-button class="el-red-button" @click="resetForm('addForm')">重置</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改规则"
      :visible.sync="dialogVisibleModify"
      width="50%"
    >
        <div class="ruleform-content">
          <el-form
            ref="modifyForm"
            :model="modifyForm"
            :rules="rules"
          >
           <el-form-item :label-width="formLabelWidth"
             prop="contains"
           >
            <span slot="label" class="form-title">
                包含字段
            </span>
              <el-input
                v-model="modifyForm.contains"
                placeholder="请输入包含字段"
              />
            </el-form-item>
           <el-form-item :label-width="formLabelWidth"
             prop="alarmClass"
           >
               <span slot="label" class="form-title">
                 报警等级
               </span>
              <el-select
                v-model="modifyForm.alarmClass"
                style="width:100%"
                placeholder="请选择报警等级"
              >
                <el-option
                  v-for="item in alarmClasses"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button class="el-green-button" type="primary" @click="submitModify">修改</el-button>
        <el-button class="el-red-button" @click="resetForm('modifyForm')">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '../../network/request'
export default {
  name: 'Index',
  data () {
    return {
      formLabelWidth: '120px',
      searchContains: '', // 搜索值
      containsOld: '', // 原搜索值
      dialogVisibleModify: false, // 修改弹出框
      dialogVisibleAdd: false, // 新增弹出框
      dialogVisibleUpdate: false, // 更新弹出框
      total: 0,
      currentPage: 1,
      pageSize: 8,
      alarmClasses: [{
        value: 1,
        label: '一级告警'
      },
      {
        value: 2,
        label: '二级告警'
      }],
      modifyForm: {
        id: '',
        contains: '',
        alarmClass: ''
      },
      addForm: {
        contains: '',
        alarmClass: ''
      },

      // ruleList: [],
      /* ruleList: [
        { id: 1, contains: '-AL', alarm_class: 1 },
        { id: 2, contains: '-BL', alarm_class: 2 },
        { id: 3, contains: '-报警', alarm_class: 1 },
        { id: 4, contains: '-预警', alarm_class: 2 },
        { id: 5, contains: '-告警', alarm_class: 1 },
        { id: 6, contains: '故障', alarm_class: 2 },
        { id: 7, contains: '异类', alarm_class: 1 },
        { id: 8, contains: '不可用', alarm_class: 2 }
      ], */
      ruleList: [
      ],

      rules: {
        contains: [
          { required: true, message: '请输入包含字段', trigger: 'blur' }

        ],
        alarmClass: [
          { required: true, message: '请选择报警等级', trigger: 'change' }
        ]
      }
    }
  },

  created () {
    request({
      method: 'POST',
      url: '/dataOp/searchRuleByPage',
      data: {
        filterMap: {
          contains: this.searchContains
        },
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
    }).then(r => {
      if (r.data.code === 200) {
        this.ruleList = r.data.data.list
        this.total = r.data.data.total
        // console.log(this.ruleList);
      } else if (r.data.code === 504) {
        this.ruleList = []
        this.total = 0
        this.currentPage = 1
      }
    })
  },

  mounted () {

  },
  methods: {
    // 打开新增弹窗
    addHandler () {
      this.dialogVisibleAdd = true
    },
    reset () {
      this.searchContains = ''
    },
    handleCurrentChange (val) {
      this.currentPage = val
      request({
        method: 'POST',
        url: '/dataOp/searchRuleByPage',
        data: {
          filterMap: {
            contains: this.containsOld
          },
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.ruleList = r.data.data.list
          this.total = r.data.data.total
          // console.log(this.ruleList);
        } else if (r.data.code === 504) {
          this.ruleList = []
          this.total = 0
          this.currentPage = 1
        }
      })
    },
    updateDialog () {
      this.dialogVisibleUpdate = true
    },
    cancelUpdate () {
      this.dialogVisibleUpdate = false
    },

    // 增删改后重新获取列表
    getList () {
      this.currentPage = 1
      this.searchContains = ''
      this.containsOld = ''
      request({
        method: 'POST',
        url: '/dataOp/searchRuleByPage',
        data: {
          filterMap: {
            contains: this.searchContains
          },
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.ruleList = r.data.data.list
          this.total = r.data.data.total
          this.searchContains = ''
          // console.log(this.ruleList);
        } else if (r.data.code === 504) {
          this.ruleList = []
          this.total = 0
          this.currentPage = 1
        }
        // console.log(this.ruleList);
      })
    },
    // 搜索按钮对应
    search () {
      this.containsOld = this.searchContains
      this.currentPage = 1
      request({
        method: 'POST',
        url: '/dataOp/searchRuleByPage',
        data: {
          filterMap: {
            contains: this.searchContains
          },
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.ruleList = r.data.data.list
          this.total = r.data.data.total
          // console.log(this.ruleList);
        } else if (r.data.code === 504) {
          this.ruleList = []
          this.total = 0
          this.currentPage = 1
        }
      })
    },
    // 处理表格中告警等级，转换成文字
    getAlarmClass (item) {
      if (item.alarm_class === 1) {
        return ('一级告警')
      } else if (item.alarm_class === 2) { return ('二级告警') }
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 打开修改表单
    editHandler (item) {
      this.modifyForm.id = item.id
      this.modifyForm.contains = item.contains
      this.modifyForm.alarmClass = item.alarm_class
      this.dialogVisibleModify = true
    },
    // 删除规则
    deleteHandler (item) {
      this.$alert('此操作将永久删除该规则，是否继续?', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        request({
          method: 'POST',
          url: '/dataOp/deleteRule',
          data: {
            id: item.id
          }
        }).then(r => {
          if (r.data.code === 200) {
            this.searchContains = ''
            this.getList()
            this.$alert('删除规则成功', '删除规则', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          } else if (r.data.code === 504) {
            this.$alert(r.data.message, '删除失败', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          }
        })
      }).catch(() => {
      })
    },
    // 提交新增
    submitAdd () {
      request({
        method: 'POST',
        url: '/dataOp/insertRule',
        data: {
          contains: this.addForm.contains,
          alarm_class: this.addForm.alarmClass
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.searchContains = ''
          this.getList()
          this.$alert('新增规则成功', '新增规则', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
          this.dialogVisibleAdd = false
          this.addForm.contains = ''
          this.addForm.alarmClass = ''
        } else if (r.data.code === 504) {
          this.$alert(r.data.message, '新增失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    },
    // 提交修改
    submitModify () {
      request({
        method: 'POST',
        url: '/dataOp/updateRule',
        data: {
          id: this.modifyForm.id,
          contains: this.modifyForm.contains,
          alarm_class: this.modifyForm.alarmClass
        }
      }).then(r => {
        if (r.data.code === 200) {
          this.searchContains = ''
          this.getList()
          this.$alert('修改规则成功', '修改规则', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
          this.dialogVisibleModify = false
          this.modifyForm.id = ''
          this.modifyForm.contains = ''
          this.modifyForm.alarmClass = ''
        } else if (r.data.code === 504) {
          this.$alert(r.data.message, '修改失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>

  .demo-form-inline {
    padding-top: 0.8vh;
  }
  .el-table{
    font-size: 20px;
  }
  >>>td .cell {
    /*margin-top: 3vh;*/
    margin: 1.8% 0;
  }
  .pagination {
    padding-top: 100vh;
    text-align: center;
  }
  >>>.el-pagination__total, >>>.el-pagination__jump{
    color: white;
  }
  >>> .el-pagination span {
    font-size: 18px;
  }
  >>>.number{
    color: #dddddd;
  }
  .ruleform-content{
    padding: 20px;
    display: flex;
    margin-right: 50px;
    flex-direction: column;
    justify-content: center;
  }
.el-dialog{
      height:30vh;
  }

</style>
